<template>
    <div class="com-cnt">
        <i-swiper :items="items"></i-swiper>
        <icon-com :items="icons"></icon-com>
        <div class="ad-img">
            广告图
        </div>
        <cnt-com>
            <gapright-com>
                <itemcnt-Com
                    v-for="(item, index) in itemsData"
                    :key="index"
                    type="1"
                >
                    <updownitem-com :cartshow="true" :GapLeftTop="true" :item="item"></updownitem-com>
                </itemcnt-Com>
            </gapright-com>
        </cnt-com>
    </div>
</template>

<script>
import ISwiper from '@/common/swiper/swiper.vue'
import IconCom from '@/common/icon/Icon.vue'
import CntCom from '@/common/cnt/Cnt.vue'
import GaprightCom from '@/common/cnt/Gapright.vue'
import ItemcntCom from '@/common/list/Itemcnt.vue'
import UpdownitemCom from '@/common/list/UpdownItem.vue'
export default {
    name: 'indexPage',
    components: {
        ISwiper,
        IconCom,
        CntCom,
        GaprightCom,
        ItemcntCom,
        UpdownitemCom
    },
    data ( ) {
        return {
            items: [
                {
                    url: '',
                    img: 'https://img1.360buyimg.com/da/s750x366_jfs/t20974/61/1039359496/297971/396ebdfc/5b2080c5Ndb7d072d.jpg!cr_1125x549_0_72.dpg'
                }
            ],
            icons: [
                {
                    img: 'https://m.360buyimg.com/mobilecms/jfs/t22240/260/1356022748/12981/e08b1022/5b27c434Nd69b0677.png',
                    txt: '有机大米'
                },
                {
                    img: 'https://m.360buyimg.com/mobilecms/jfs/t22957/77/170039689/14047/f0c4d9e9/5b27c509N00e3db54.png',
                    txt: '有机小米'
                },
                {
                    img: 'https://m.360buyimg.com/mobilecms/jfs/t22777/123/167278643/13704/a80c6be7/5b27c53aN2d009293.png',
                    txt: '有机牛奶'
                },
                {
                    img: 'https://m.360buyimg.com/mobilecms/jfs/t24208/241/171018339/13299/1aa02b14/5b27c548N3ddaf3a6.png',
                    txt: '有机面粉'
                },
                {
                    img: 'https://m.360buyimg.com/mobilecms/jfs/t21238/68/1412570861/12090/7720d917/5b27c55bN3cb87183.png',
                    txt: '地方特产'
                }
            ],
            itemsData: [
                {
                    src: "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3514593146,4244376339&fm=173&app=25&f=JPEG?w=640&h=392&s=D1824FB10EC314D21405170F0300F045",
                    title: "五常有机大米",
                    txt: "东北大米5KG",
                    num: "￥128.0",
                    oldPrice: "￥158.0"
                },
                {
                    src: "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=750671621,69549334&fm=173&app=25&f=JPEG?w=640&h=430&s=59D74F9E060B4AE430AF9DF003003079",
                    title: "有机十谷米",
                    txt: "东北大米5KG",
                    num: "￥12.6",
                    oldPrice: "￥20.6"
                },
                {
                    src: "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2408317694,1784936348&fm=173&app=25&f=JPEG?w=640&h=425&s=D38467A75CC3A0C2563591A30300E015",
                    title: "金典有机纯牛奶",
                    txt: "东北大米5KG",
                    num: "￥68.0",
                    oldPrice: "￥79.0"
                }
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height auto 
    overflow hidden
.ad-img 
    width 100%
    padding-bottom 40%
    background-color #ddd 
    height 0
    overflow hidden
</style>